<template>
        <SimpleSelect v-if="schema.type === FormTypeEnum.select"
          wrapperClassName='w-full !h-8'
          class='flex items-center'
          :disabled="readonly"
          :defaultValue="value"
          :items="(schema as CredentialFormSchemaSelect).options.map(option => ({ value: option.value, name: option.label.en_US }))"
          @select="(item:any) => handleSelectChange(item.value)"
          :placeholder="placeholder?.en_US"
        />
        <InputNumber v-if="schema.type === FormTypeEnum.textNumber"
          class='h-8 w-full overflow-hidden rounded-lg bg-gray-100 p-2 text-[13px] font-normal leading-8 text-gray-900 placeholder:text-gray-400 focus:outline-none'
          :value="value"
          @change={handleStaticChange}
          :readOnly="readonly"
          :placeholder="placeholder?.en_US"
          :min="(schema as CredentialFormSchemaNumberInput).min"
          :max="(schema as CredentialFormSchemaNumberInput).max"
        />

</template>
<script setup lang="ts" name="ConstantField">
import type { CredentialFormSchema, CredentialFormSchemaNumberInput, CredentialFormSchemaSelect } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
import type { Var } from '@/app/components/workflow/types'
import { SimpleSelect } from '@/app/components/base/select'
import { InputNumber } from 'ant-design-vue'
import { computed } from 'vue'
import { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface'

type Props = {
  schema: Partial<CredentialFormSchema>
  readonly: boolean
  value: string
  onChange: (value: string | number, varKindType: VarKindType, varInfo?: Var) => void
}

const props = defineProps<Props>();

const placeholder = computed(()=> (props.schema as CredentialFormSchemaSelect).placeholder) 
const handleStaticChange = (e: ChangeEvent) => {
  const value = e.target.value === '' ? '' : Number.parseFloat(e.target.value)
  props.onChange(value, VarKindType.constant)
}
const handleSelectChange = (value: string | number) => {
  value = value === null ? '' : value
  props.onChange(value as string, VarKindType.constant)
}

</script>

